<template>
  <div>
    <!-- 我的历史听歌 -->
    <div
      class="history"
      v-if="$route.query.id == userInfo.profile.userId && songData.length > 0"
    >
      <div class="h3-title header">
        <div class="left">
          <b>听歌排行</b>
          <span>累积听歌{{ songData.length }}首</span>
          <i class="iconfont">&#xe7f3;</i>
          <div class="warning">实际播放时间过短的歌曲将不纳入计算。</div>
        </div>
        <div class="right">
          <el-radio v-model="radio" :label="1">最近一周</el-radio>
          <i>|</i>
          <el-radio v-model="radio" :label="0">所有时间</el-radio>
        </div>
      </div>
      <div class="history-content">
        <div class="list" v-for="(item, index) in songData" :key="index">
          <div class="left">
            <span class="index">{{ index + 1 }}.</span>
            <span class="icon"
              ><i @click="audioPlay(item)" class="iconfont">&#xe638;</i></span
            >
            <b @click="audioInfo(item)" class="audio-title">{{
              item.song.name
            }}</b>
            <!--item.song.id-->
            <span class="intext nohover"> - </span>
            <span @click="songAuthInfo(item)" class="intext">{{
              item.song.ar[0].name
            }}</span>
            <!--item.song.ar[0].id-->
          </div>
          <div class="right">{{ item.playCount }}次</div>
        </div>
      </div>
    </div>
    <!-- 我的 -->
    <h3 class="h3-title mt-3">
      我创建的歌单&nbsp;&nbsp;&nbsp;({{ mePlaylist.length }})
    </h3>
    <div class="music-list">
      <div class="list" v-for="item in mePlaylist" :key="item.id">
        <div class="music">
          <div class="img">
            <img @click="albumInfo(item)" :src="item.coverImgUrl" alt="" />
          </div>
          <div class="control">
            <div class="left">
              <i class="iconfont font-12">&#xe600;</i>
              &nbsp;&nbsp;<span class="font-12">{{ item.playCount }}</span>
            </div>
            <div class="right">
              <i @click="albumPlay(item)" class="iconfont iconfont-cursor"
                >&#xe638;</i
              >
            </div>
          </div>
        </div>
        <div class="music-info" :title="item.name" @click="albumInfo(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 歌单 -->
    <h3
      v-if="singerDetails.profile.playlistCount > 1"
      style="margin-top: 20px"
      class="h3-title"
    >
      我收藏的歌单&nbsp;&nbsp;&nbsp;({{ singerDetails.profile.playlistCount }})
    </h3>
    <div v-if="singerDetails.profile.playlistCount > 0" class="music-list">
      <div class="list" v-for="item in playlist" :key="item.id">
        <div class="music">
          <div class="img">
            <img @click="albumInfo(item)" :src="item.coverImgUrl" alt="" />
          </div>
          <div class="control">
            <div class="left">
              <i class="iconfont font-12">&#xe600;</i>
              &nbsp;&nbsp;<span class="font-12">{{ item.playCount }}</span>
            </div>
            <div class="right">
              <i @click="albumPlay(item)" class="iconfont iconfont-cursor"
                >&#xe638;</i
              >
            </div>
          </div>
        </div>
        <div class="music-info" :title="item.name" @click="albumInfo(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div v-if="singerDetails.profile.playlistCount > 0" class="footer-size">
      <el-pagination
        v-if="singerDetails.profile.playlistCount > 20"
        class="pagination"
        background
        layout="prev, pager, next, sizes"
        :current-page.sync="page"
        @current-change="init()"
        :page-sizes="[20]"
        :total="singerDetails.profile.playlistCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { userPlaylist, userRecord, apiLyric, checkMusic } from "@/api";
import { mapGetters } from "vuex";
export default {
  name: "userpage",
  data() {
    return {
      playlist: [],
      page: 1,
      mePlaylist: [],
      radio: 1,
      songData: [],
    };
  },
  created() {
    this.init();
  },
  watch: {
    radio(newValue) {
      this.getUserRecord();
    },
  },
  computed: {
    ...mapGetters(["singerDetails", "userInfo"]),
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.init();
  },
  methods: {
    ...mapActions("music", [
      "SET_CHANGE_MUSIC_URL",
      "ALBUM_MUSIC_LIST_FORMAT",
      "AUDIO_MUSIC_FORMAT",
    ]),
    init() {
      // singerDetails profile playlistCount
      this.getUserPlayList();
      if (this.$route.query.id == this.userInfo.profile.userId) {
        this.getUserRecord();
      }
    },
    getUserRecord() {
      userRecord({
        uid: this.$route.query.id,
        type: this.radio,
      }).then((data) => {
        console.log(data, "用户播放历史记录");
        if (this.radio == 0) {
          this.songData = data.allData;
        } else {
          this.songData = data.weekData;
        }
      });
    },
    getUserPlayList() {
      userPlaylist({
        uid: this.$route.query.id,
        limit: 20,
        offset: (this.page - 1) * 20,
      }).then((data) => {
        if (this.page == 1) {
          this.playlist = data.playlist.slice(1);
          this.mePlaylist = data.playlist.slice(0, 1);
        } else {
          this.playlist = data.playlist;
        }
      });
    },
    albumInfo(val) {
      this.$router.push({
        name: "albumDetails",
        query: {
          id: val.id,
        },
      });
    },
    audioInfo(val) {
      // console.log(val,"音乐详情");
    },
    songAuthInfo(val) {
      console.log(val, "歌手详情");
    },
    async audioPlay(data) {
      let val = data.song;
      let { musicFlag, config } = await this.AUDIO_MUSIC_FORMAT(val);

      if (musicFlag) {
        await this.SET_CHANGE_MUSIC_URL(config);
        this.$Notification("添加成功!", "success");
      } else {
        this.$Notification("此歌曲暂无版权。");
      }
    },
    async albumPlay(val) {
      let { config, musicFlag } = await this.ALBUM_MUSIC_LIST_FORMAT(val);
      if (musicFlag) {
        config.map(async (item) => {
          await this.SET_CHANGE_MUSIC_URL(item);
        });
        this.$Notification("添加成功!", "success");
      } else {
        this.$Notification("此歌曲暂无版权。");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mt-3 {
  margin-top: 20px;
}
.history {
  ::v-deep .el-radio.is-checked {
    .el-radio__label {
      color: #333 !important;
    }
    font-weight: 700;
  }
  ::v-deep .el-radio__input {
    display: none;
  }
  ::v-deep .el-radio {
    margin-right: 0;
  }
  .history-content {
    border: 1px solid rgb(226, 226, 226);
    border-top: 0;
    .list {
      &:nth-of-type(even) {
        background-color: rgb(247, 247, 247);
      }
      &:hover {
        background-color: rgb(238, 238, 238);
      }
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 14px;
        display: flex;
        align-items: center;
        .index {
          width: 30px;
          text-align: right;
        }
        .audio-title {
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        .icon {
          margin: 0 10px;
          .iconfont {
            font-weight: 550;
            &:hover {
              color: rgb(98, 98, 98);
            }
            cursor: pointer;
            font-size: 18px;
            color: rgb(179, 179, 179);
          }
        }

        .intext {
          font-size: 12px;
          margin-left: 8px;
          color: #aeaeae;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        .nohover {
          text-decoration: inherit;
          cursor: inherit;
          &:hover {
            text-decoration: inherit;
            cursor: inherit;
          }
        }
      }
      .right {
        padding-left: 10px;
        height: 100%;
        font-size: 12px;
        color: rgb(102, 102, 102);
        width: 320px;
        background: rgba(78, 180, 245, 0.1);
        display: flex;
        align-items: center;
      }
    }
  }
  .header {
    font-size: 12px;
    color: rgb(102, 102, 102);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      position: relative;
      .warning {
        &:hover {
          display: block;
        }
        display: none;
        position: absolute;
        border-radius: 3px;
        right: -240px;
        bottom: -40px;
        padding: 10px;
        background-color: #fff;
        width: 270px;
        height: 20px;
        border: 1px solid #999;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          height: 10px;
          top: -10px;
        }
      }
      .iconfont:hover + div {
        display: block;
      }
      .iconfont {
        font-size: 20px;
        cursor: pointer;
      }
      b {
        font-size: 20px;
        color: #666;
        font-weight: 500;
      }
      span {
        margin: 0 6px;
      }
    }
    .right {
      i {
        margin: 0 6px;
      }
    }
  }
}
.noList {
  font-weight: 600;
  height: 359px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  span {
    margin-left: 10px;
  }
  .img {
    background-image: url(../../assets/img/myHomepagefans.png);
    background-position: no-repeat 0 9999px;
    width: 64px;
    height: 50px;
    background-position: 0 -347px;
  }
}
.footer-size {
  text-align: center;
  margin-top: 25px;
  ::v-deep .el-pagination__sizes {
    display: none;
  }

  ::v-deep li {
    font-weight: 400 !important;
    &:hover {
      border-color: rgb(102, 102, 102) !important;
      color: rgb(51, 51, 51) !important;
    }
    border-radius: 2px;
    border: 1px solid rgb(204, 204, 204) !important;
    background-color: #fff !important;
  }
  ::v-deep li.active {
    background-color: #a2161b !important;
    border-color: rgb(162, 22, 27);
    &:hover {
      color: #fff !important;
      border-color: rgb(102, 102, 102) !important;
    }
  }
}
.music-list {
  margin-left: -27px;
  width: 973px;
  display: flex;
  flex-wrap: wrap;
  .list {
    margin-top: 20px;
    // margin-right:21px;
    // margin-left:21px;

    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .music {
      position: relative;
      width: 140px;
      height: 140px;
      .img {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
      .control {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        color: rgb(202, 202, 202);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 27px;
        background-image: url(../../assets/img/homepage-control.png);
        background-position: 0 -537px;
        .font-12 {
          font-size: 12px;
        }
        .iconfont {
          cursor: context-menu;
        }
        .iconfont-cursor {
          cursor: pointer;
        }
        .iconfont-cursor:hover {
          color: #fff;
        }
      }
    }
    .music-info {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 14px;
      color: #000;
      width: 140px;
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}
.h3-title {
  font-size: 20px;
  color: #333;
  border-bottom: 2px solid #c20c0c;
}
</style>